<template>
  <div class="chart">
    <Header />
    <Container />
    <div class="chart-container_bgm">
    </div>
    <div class="chart-container_camera">
      <div class="chart-container_fence">
        <img :src="cidZone1Img1" class="chart-container_fence__img1-1" @click="handleElectronic(1)" />
        <img :src="cidZone1Img2" class="chart-container_fence__img1-2" @click="handleElectronic(1)" />
        <img :src="cidZone1Img3" class="chart-container_fence__img1-3" @click="handleElectronic(1)" />
        <img :src="cidZone1Img4" class="chart-container_fence__img1-4" @click="handleElectronic(1)" />
        <img :src="cidZone2Img1" class="chart-container_fence__img2-1" @click="handleElectronic(2)" />
        <img :src="cidZone2Img2" class="chart-container_fence__img2-2" @click="handleElectronic(2)" />
        <img :src="cidZone2Img3" class="chart-container_fence__img2-3" @click="handleElectronic(2)" />
        <img :src="cidZone3Img1" class="chart-container_fence__img3-1" @click="handleElectronic(3)" />
      </div>
      <!-- 操场全景 -->
      <img class="camera camera-1" src="../../assets/icons/camera2.png" @click="handleClick('camera-1', '1000004$1$0$64')" />
      <!-- 足球场 -->
      <img class="camera camera-2" src="../../assets/icons/camera2.png" @click="handleClick('camera-2', '1000004$1$0$53')" />
      <!-- 楼顶全景 -->
      <img class="camera camera-3" src="../../assets/icons/camera2.png" @click="handleClick('camera-3', '1000005$1$0$88')" />
      <!-- 中庭 -->
      <img class="camera camera-4" src="../../assets/icons/camera2.png" @click="handleClick('camera-4', '1000004$1$0$1')" />
      <!-- 围墙北1 -->
      <img class="camera camera-5" src="../../assets/icons/camera2.png" @click="handleClick('camera-5', '1000005$1$0$86')" />
      <!-- 围墙全景 -->
      <img class="camera camera-6" src="../../assets/icons/camera2.png" @click="handleClick('camera-6', '1000005$1$0$82')" />
      <!-- 2F连廊 -->
      <img class=" camera camera-7" src="../../assets/icons/camera2.png" @click="handleClick('camera-7', '1000004$1$0$74')" />
    </div>
    <ModalScreen :isShow="isShow" :id="id" :channelCode="channelCode" @handleClose="handleClose" />
    <div class="chart-modal" v-if="electronicShow">
      <div class="chart-modal_mask"></div>
      <div class="chart-modal_container">
        <div class="modal">
          <div class="modal-header">
            <div class="modal-header_title"></div>
            <span class="modal-header_close" @click="handleElectronicClose">
              <svg fill-rule="evenodd" viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path></svg>
            </span>
          </div>
          <div class="modal-content">
            <div class="modal-content_table">
              <div class="table-header">
                <span style="width: 60%">编号</span>
                <span style="width: 40%">操作</span>
              </div>
              <div class="table-content">
                <div class="table-content_th" :style="{background: index % 2 == 0 ? '#12242E' : 'rgba(139, 230, 225, 0.08)'}" v-for="(item, index) in showElectronicList" :key="index">
                  <span style="width: 60%; color: #ffffff;">{{item.cidCode}}</span>
                  <span style="width: 40%; color: #8BE6E1; cursor: pointer;" @click="handleRead(item.id)">点击处理</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 1000004$1$0$64,操场全景
 * 1000004$1$0$53,足球场
 * 
 * 1000005$1$0$88,1000005$1$0$89,1000005$1$0$90,1000005$1$0$92,楼顶全景
 * 
 * 1000005$1$0$61,围墙东5   
 * 1000005$1$0$62,围墙东3   
 * 1000005$1$0$63,围墙西5   
 * 1000005$1$0$64,围墙东4   
 * 1000005$1$0$65,围墙东2   
 * 1000005$1$0$68,围墙西4   
 * 1000005$1$0$71,围墙南2   
 * 1000005$1$0$72,围墙东6   
 * 1000005$1$0$75,围墙西2   
 * 1000005$1$0$76,围墙南1   
 * 1000005$1$0$77,围墙全景   
 * 1000005$1$0$78,围墙全景   
 * 1000005$1$0$79,围墙全景   
 * 1000005$1$0$80,围墙全景   
 * 1000005$1$0$81,围墙西3   
 * 1000005$1$0$82,围墙南3
 * 1000005$1$0$84,围墙东1
 * 1000005$1$0$86,围墙北1
 * 1000005$1$0$94,围墙后门-北2
 * 
 * 1000004$1$0$74,2F连廊
 */
import Header from './components/Header'
import Container from './components/Container'
import ModalScreen from './components/ModalScreen.vue'
import { getCookie } from '@/utils/cookie-util'
import { getElectronicQuery, getElectronicRead } from '@/api/index.js'
import redLine1_1 from '../../assets/images/red-line1_1.png';
import line1_1 from '../../assets/images/line1_1.png'
import redLine1_2 from '../../assets/images/red-line1_2.png';
import line1_2 from '../../assets/images/line1_2.png'
import redLine1_3 from '../../assets/images/red-line1_3.png';
import line1_3 from '../../assets/images/line1_3.png'
import redLine1_4 from '../../assets/images/red-line1_4.png';
import line1_4 from '../../assets/images/line1_4.png'
import redLine2_1 from '../../assets/images/red-line2_1.png';
import line2_1 from '../../assets/images/line2_1.png'
import redLine2_2 from '../../assets/images/red-line2_2.png';
import line2_2 from '../../assets/images/line2_2.png'
import redLine2_3 from '../../assets/images/red-line2_3.png';
import line2_3 from '../../assets/images/line2_3.png'
import redLine3_1 from '../../assets/images/red-line3_1.png';
import line3_1 from '../../assets/images/line3_1.png'
export default {
  name: 'index',
  components: {
    Header,
    Container,
    ModalScreen
  },
  data() {
    return {
      isShow: false,
      id: '',
      channelCode: '',
      electronicShow: false,
      electronicList: [],
      showElectronicList: [],
      cidZone1: [],
      cidZone2: [],
      cidZone3: [],
    }
  },
  methods: {
    handleClick(id, channelCode) {
      this.isShow = true
      this.id = id
      this.channelCode = channelCode
    },
    handleClose() {
      this.isShow = false
    },
    _getElectronicQuery() {
      getElectronicQuery({}).then((res) => {
        if (res.data) {
          let data = res.data?.data
          this.electronicList = data
          this.cidZone1 = data.filter((item) => item.cidZone == 1)
          this.cidZone2 = data.filter((item) => item.cidZone == 2)
          this.cidZone3 = data.filter((item) => item.cidZone == 3)
        }
      })
    },
    handleElectronic(value) {
      let resultsList = []
      if (value == 1) {
        resultsList = this.electronicList.filter((item) => item.cidZone == 1)
      }
      if (value == 2) {
        resultsList = this.electronicList.filter((item) => item.cidZone == 2)
      }
      if (value == 3) {
        resultsList = this.electronicList.filter((item) => item.cidZone == 3)
      }
      this.showElectronicList = resultsList
      this.electronicShow = true
    },
    handleElectronicClose() {
      this.electronicShow = false
    },
    handleRead(id) {
      getElectronicRead({id}).then((res) => {
        if (res.code == 0) {
          this._getElectronicQuery()
        }
      })
    }
  },
  created() {
    if (!getCookie('token')) {
      return this.$router.replace({path: '/login'})
    }
    this._getElectronicQuery()
  },
  computed: {
    cidZone1Img1() {
      return this.cidZone1 && this.cidZone1.length ? redLine1_1 : line1_1;
    },
    cidZone1Img2() {
      return this.cidZone1 && this.cidZone1.length ? redLine1_2 : line1_2;
    },
    cidZone1Img3() {
      return this.cidZone1 && this.cidZone1.length ? redLine1_3 : line1_3;
    },
    cidZone1Img4() {
      return this.cidZone1 && this.cidZone1.length ? redLine1_4 : line1_4;
    },
    cidZone2Img1() {
      return this.cidZone2 && this.cidZone2.length ? redLine2_1 : line2_1;
    },
    cidZone2Img2() {
      return this.cidZone2 && this.cidZone2.length ? redLine2_2 : line2_2;
    },
    cidZone2Img3() {
      return this.cidZone2 && this.cidZone2.length ? redLine2_3 : line2_3;
    },
    cidZone3Img1() {
      return this.cidZone3 && this.cidZone3.length ? redLine3_1 : line3_1;
    },
  }
}
</script>

<style lang="less" scoped>
.chart {
  width: 1920px;
  height: 1080px;
  background-image: url(../../assets/images/bgm.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  .chart-container_bgm {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../../assets/images/school.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .chart-container_camera {
    width: 940px;
    height: 548px;
    top: 297px;
    left: 489px;
    position: absolute;
    z-index: 10;
    .chart-container_fence {
      height: 100%;
      position: relative;
      img {
        cursor: pointer;
      }
      .chart-container_fence__img1-1 {
        position: absolute;
        top: 0;
        left: 20px;
        width: 172px;
        height: 13px;
      }
      .chart-container_fence__img1-2 {
        position: absolute;
        top: 0px;
        left: 20px;
        width: 13px;
        height: 447px;
      }
      .chart-container_fence__img1-3 {
        position: absolute;
        top: 434px;
        left: 20px;
        width: 146px;
        height: 13px;
      }
      .chart-container_fence__img1-4 {
        position: absolute;
        top: 324px;
        left: 154px;
        width: 13px;
        height: 123px;
      }
      .chart-container_fence__img2-1 {
        position: absolute;
        bottom: 0;
        width: 13px;
        height: 123px;
        left: 260px;
      }
      .chart-container_fence__img2-2 {
        position: absolute;
        bottom: 0px;
        left: 260px;
        width: 700px;
        height: 13px;
      }
      .chart-container_fence__img2-3 {
        position: absolute;
        bottom: 0;
        left: 947px;
        width: 13px;
        height: 280px;
      }
      .chart-container_fence__img3-1 {
        position: absolute;
        top: 0px;
        left: 200px;
        width: 760px;
        height: 12px;
      }
    }
    .camera {
      width: 54px;
      height: 54px;
      position: absolute;
      cursor: pointer;
    }
    .camera-1 {
      top: 338px;
      left: 120px;
    }
    .camera-2 {
      top: 168px;
      left: 120px;
    }
    .camera-3 {
      top: 398px;
      left: 445px;
    }
    .camera-4 {
      right: 10px;
      top: 260px
    }
    .camera-5 {
      right: 100px;
      top: 58px;
    }
    .camera-6 {
      top: 488px;
      right: 170px;
    }
    .camera-7 {
      left: 370px;
      top: 238px;
    }
  }
}
.modal-content_table {
  font-size: 14px;
  .table-header {
    color: #8BE6E1;
    span {
      display: inline-block;
      line-height: 40px;
      padding-left: 20px;
      box-sizing: border-box;
    }
  }
  .table-content {
    height: 460px;
    overflow-y: scroll;
    .table-content_th {
      span {
        display: inline-block;
        line-height: 35px;
        padding-left: 20px;
        box-sizing: border-box;
      }
    }
  }
}
</style>